<template>
  <view>
    <nav-bar title="我的训练计划"></nav-bar>
    <!-- <view class="common-title">
      <view class="title">我的康复师</view>
      <view class="more-box" @click="clickMorePatient">
        更多<uni-icons class="more-icon" type="right" color="#999" size="12"></uni-icons>
      </view>
    </view> -->
    <!-- <view class="my-patient">
      <view class="img"></view>
      <view class="info-box">
        <view class="info">
          <view class="professional">{{ myTherapists.professional }}</view>
        </view>
        <view class="label">{{ myTherapists.label }}</view>
      </view>
    </view> -->
    <view class="common-title">
      <view class="title">我的计划</view>
      <view class="more-box" @click="clickMorePlan">
        更多<uni-icons class="more-icon" type="right" color="#999" size="12"></uni-icons>
      </view>
    </view>
    <you-scroll
      :loadingHeight="loadingHeight"
      :mainHeight="scrollHeight"
      :isAllData="isAllData"
      :isRequestSuccess="isRequestSuccess"
      @onRefresh="onRefresh"
      @loadMore="loadMore"
    >
      <template>
        <view v-if="isLoading" class="common-loading">
          <image class="loading-img" :src="baseIconUrl + '/commonIcon/icon_loading.png'" />
          正在加载数据，请稍后......
        </view>
        <view class="common-no-data" v-else-if="!planList || planList.length === 0">
          <image class="no-data-img" :src="baseIconUrl + '/commonIcon/icon_no_data.png'" />
          <view class="text">暂无数据</view>
        </view>
        <view v-else>
          <plan-list
            :showPlanBtn="true"
            :planList="planList"
            :btnConfig="btnConfig"
          ></plan-list>
        </view>
      </template>
    </you-scroll>
  </view>
</template>

<script>
  import PlanList from '../../components/planList.vue'
  import { baseIconUrl } from '@/config'
  export default {
    name: 'MyPlanList',
    components: { PlanList },
    data() {
      return {
        baseIconUrl,
        myTherapists: {
          // name: '赵菲菲',
          // sex: '女',
          // age: '35',
          professional: '主任医师',
          label: '上海市眼科综合医院'
        },
        loadingHeight: '',
        scrollHeight: '',
        isAllData: false,
        isRequestSuccess: false,
        isLoading: false,
        planList: [],
        btnConfig: {
          1: [
            { name: '反馈详情', funcName: 'clickFeedbackDetail' },
          ]
        }
      }
    },

    onLoad() {
      this.scrollHeight = this.$store.getters.heightData.noTabMainHeight - 182 + 'px'
      this.loadingHeight = this.$store.getters.heightData.noTabMainHeight - 202 + 'px'
    },

    methods: {
      clickMorePatient() {
        uni.navigateTo({
          url: '/subPages/physicianTrainPlan/patient/myTherapists'
        })
      },
      // 下拉刷新
      onRefresh() {
        this.pageNum = 1
        this.planList = []
        this.isAllData = false
        this.isRequestSuccess = false
        this.getPlanList()
      },
      // 上拉加载
      loadMore() {
        if (this.planList.length < this.total) {
          this.pageNum++
          this.isAllData = false
          this.isRequestSuccess = false
          this.getPlanList()
        } else {
          this.isAllData = true
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .common-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 46px;
    padding: 0 30rpx;
    .title {
      font-size: 32rpx;
      font-weight: 500;
    }
    .more-box {
      font-size: 24rpx;
      color: #999;
    }
  }
  .my-patient {
    display: flex;
    align-items: center;
    height: 90px;
    margin: 0 30rpx;
    padding: 30rpx;
    border-radius: 16rpx;
    background-color: #FFF;
    .img {
      width: 120rpx;
      height: 120rpx;
      border-radius: 60rpx;
      background-color: #115baa;
    }
    .info-box {
      flex: 1;
      margin: 0 20rpx;
      .info {
        display: flex;
        .professional {
          display: inline-block;
          height: 36rpx;
          padding: 0 12rpx;
          border-radius: 8rpx;
          border: 1rpx solid #115BAA;
          line-height: 36rpx;
          font-size: 24rpx;
          color: #115BAA;
        }
      }
      .label {
        margin-top: 20rpx;
        font-size: 24rpx;
        color: #333;
      }
    }
    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 60rpx;
      padding: 0 36rpx;
      border-radius: 30rpx;
      font-size: 24rpx;
      color: #FFF;
      background-color: #115BAA;
    }
  }
</style>
